<template>
  <div style="height: 100%; overflow:hidden" class="main">
    <!-- <x-header :left-options="{preventGoBack:true,backText: ''}" @on-click-back="backhome">隐患上报<div id="headeright"  @click="dangereport">上报</div></x-header> -->
    <x-header :left-options="{preventGoBack:true,backText: ''}" @on-click-back="backhome">安全监测</x-header>
    <group>
      <tab bar-position="bottom">
        <tab-item :selected="flagC" @on-item-click="onCheckClick">自动化监测</tab-item>
        <tab-item @on-item-click="onRectifyClick" :selected="flagR">传统监测</tab-item>
      </tab>
      <div class="sup"></div>
    </group>
    <div class="main-container" style="overflow:auto;height:86%">
      <v-touch v-on:swiperight="onSwipeRight" :swipe-options="{direction: 'horizontal'}">
        <scroller :on-refresh="refresh" :on-infinite="infinite" ref="taskScroller">
          <!-- <scroller  :on-infinite="infinite" ref="taskScroller"> -->
          <!-- content -->
          <!-- <scroller> -->
          <!-- <div v-bind:class="{check:this.flagC,rectify:this.flagR}"> -->

          <div v-if="flagC">
            <div v-for="(item, i) in list" :key="i">
              <swipeout>
                <swipeout-item>
                  <div
                    slot="content"
                    style="display:flex;border: 1px solid #f5f5f5;"
                    @click="openInfo(item)"
                  >
                    <div
                      class="more-box"
                      style="margin-left: 30px;margin-right: 30px;margin-bottom: 15px;margin-top: 15px;width:100%"
                    >
                      <div class="project_style">
                        <span style="display:inline-block">{{item.AUTOSCHEME}}</span>
                      </div>
                      <div class="state_time_style">
                        <div class="fill_user">
                          <span class="gray-label" style="margin-right: 10px;">监测对象:</span>
                          {{item.AUTOOBJECT}}
                        </div>
                        <div class="fill_time">
                          <span class="gray-label" style="margin-right: 5px;">检测点:</span>
                          {{item.AUTODOTNAME}}
                        </div>
                      </div>
                    </div>
                  </div>
                </swipeout-item>
              </swipeout>
            </div>
          </div>

          <div v-if="flagR">
            <group v-for="(item, i) in listR" gutter="-1px" :key="i">
              <div title :border-intent="false" @click="openInfoR(item)">
                <div
                  class="more-box"
                  style="margin-left: 30px;margin-right: 30px;margin-bottom: 15px;margin-top: 15px;"
                >
                  <div class="project_style">
                    <!-- <span class="gray-label" style="margin-right: 10px;"></span> -->
                    <!-- <span style="margin-right: 26px;margin-left: 46px;display:inline-block">{{item.INPUTERFULLNAME}}填写的安全检查表单</span> -->
                    <span style="display:inline-block">{{item.TRASCHEME}}</span>
                    <!-- <span class="gray-label" style="margin-right: 10px;">填写人</span>
                    <span class="hidanger-chosetaskfontshow">{{item.INPUTERFULLNAME}}</span>-->
                  </div>
                  <!-- <div style="margin-top: 8px;">
              <span class="gray-label" style="margin-right: 10px;">当前环节</span>
              {{item.CONSTURCTPRO}}
                  </div>-->
                  <div class="fill_user" style="margin-top:8px">
                    <span class="gray-label" style="margin-right: 10px;">监测对象:</span>
                    {{item.TRAOBJECT}}
                  </div>
                  <div class="state_time_style">
                    <div name="state">
                      <span>监测项目:</span>
                      {{item.TRAPRO}}
                    </div>
                    <div class="fill_time">
                      <span class="gray-label" style="margin-right: 5px;">检测点:</span>
                      {{item.DOTNAME}}
                    </div>
                  </div>
                </div>
              </div>
            </group>
          </div>
        </scroller>
      </v-touch>
    </div>
    
    <!-- :dialog-style="{'max-width': '100%', width: '100%', height: '50%'}" -->
    <x-dialog hide-on-blur v-model="showDialog" :dialog-style="{'max-width': '100%', width: '100%', height: '50%'}" @on-hide="clearData">
        <div id="safety" :style="canvasStyle"></div>
    </x-dialog>
    <router-view></router-view>
  </div>
</template>

<script>
// 引入基本模板
let echarts = require("echarts/lib/echarts");
// 引入折线图组件
require("echarts/lib/chart/line");
// 引入提示框和图例组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/legend");
require("echarts/lib/component/graphic");
import $ from 'jquery'
import { Swipeout, SwipeoutItem, SwipeoutButton, XDialog } from "vux";
import { log } from 'util';
var $vue = {};
export default {
  name: "safetyMonitor",
  // inject:['reload'],
  components: {
    Swipeout,
    SwipeoutItem,
    SwipeoutButton,
    XDialog
  },
  beforeCreate() {
    $vue = this;
  },
  mounted() {
    this.getDataR(
      res => {
        if (res.status == "200" && res.data.datas.length > 0) {
          this.listR = [...this.listR, ...res.data.datas]; //TODO 啥意思
          this.pageR++;
          done();
        } else {
          done(true); //有错误的情况或者没有记录，传参true
        }
      },
      () => {}
    );
    this.canvasWidth = document.body.clientWidth;
  },
  data() {
    return {
      list: [],
      listR: [],
      page: 1,
      pageR: 1,
      keyword: "",
      createPop: false, //弹出层是否创建
      loading: false, //下拉刷新时禁止无限加载
      guid: "",
      flagC: true,
      flagR: false,
      showDialog: false,
      autoDate: [],
      autoThisChange: [],
      autoCumChange: [],
      autoRateChange: [],
      autolUnit: "",
      normalDate: [],
      normalThisChange: [],
      normalCumChange: [],
      normalRateChange: [],
      normalUnit: "",
      canvasStyle:{
          height:'300px',
          width:''
      },
      canvasWidth:'',
    };
  },
  methods: {
      clearData(){
          console.log(this.showDialog)
      },
    onCheckClick() {
      this.flagC = true;
      this.flagR = false;
    },
    onRectifyClick() {
      this.flagC = false;
      this.flagR = true;
    },
    onSwipeRight() {
      this.$router.push("/index/home");
    },
    backhome() {
      this.$router.push("/index/home");
    },
    getDataR(callback, failed) {
      var params = {
        _method: "component.getListData",
        _param: {
          bizObj: "PMHSE_TRADOT",
          service: "selectMore",
          fields: "*",
          filter: {
            phone:{}
          },
          currentPageIndex: this.pageR,
          pageSize: 50,
          orderList: [{ field: "INPUTDATE", order: "DESC" }],
          QueryFormData: ""
        }
      };
      let json = {
        FixJSON: JSON.stringify(params)
      };
      this.$ajax({
        method: "post",
        url: this.COMMON_URL,
        data: json
      })
        .then(res => {
          // debugger
          callback(res);
        })
        .catch(err => {
          failed();
        });
    },
    getData(callback, failed) {
      var filter = "1=1";
      //console.log(this.proId);
      var params = {
        _method: "component.getListData",
        _param: {
          bizObj: "PMHSE_NEWADOT1",
          service: "selectMore",
          fields: "*",
          filter: {
            phone:{}
          },
          currentPageIndex: this.page,
          pageSize: 50,
          orderList: [{ field: "INPUTDATE", order: "DESC" }],
          QueryFormData: ""
        }
      };
      let json = {
        FixJSON: JSON.stringify(params)
      };
      this.$ajax({
        method: "post",
        url: this.COMMON_URL,
        data: json
      })
        .then(res => {
          callback(res);
        })
        .catch(err => {
          failed();
        });
    },
    openInfo(item) {
       this.canvasStyle.width = this.canvasWidth + 'px';
      var params = {
        _method: "PMHSE_ADOTDATA.selectChange",
        dotName: item.AUTODOTNAME
      };
      let json = {
        FixJSON: JSON.stringify(params)
      };
      this.$ajax({
        url: this.COMMON_URL,
        method: "post",
        data: json
      }).then(res => {
        var list = res.data.list;
        if (list.length > 0) {
            this.showDialog = true;
          this.autoUnit = list[0].UNIT;
          for (var i = 0; i < list.length; i++) {
            this.autoDate.push(list[i].INPUTDATE.substring(0, 10));
            this.autoThisChange.push(list[i].THISCHANGE);
            this.autoCumChange.push(list[i].CUMCHANGE);
            this.autoRateChange.push(list[i].RATECHANGE);
          }
          this.drawAutoEcharts();
        } else {
          this.$vux.toast.show({
            type: "text",
            text: "暂无数据！",
            position: "center"
          });
        }
      });
    },
    drawAutoEcharts() {
      var myChart = echarts.init(document.getElementById("safety"),);
      
      var option = {
        title: {
          text: "自动化监测信息展示"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["变化量", "累计变化量", "变化率"]
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: $vue.autoDate
          }
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              formatter: "{value}" + $vue.autoUnit,
              fontSize : 6,
            }
          }
        ],
        series: [
          {
            name: "变化量",
            type: "line",
            data: $vue.autoThisChange,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }]
            }
          },
          {
            name: "累计变化量",
            type: "line",
            data: $vue.autoCumChange,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }]
            }
          },
          {
            name: "变化率",
            type: "line",
            data: $vue.autoRateChange,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }]
            }
          }
        ]
      };
      myChart.setOption(option);
      //防止二次点击时重复加载数据
      this.autoUnit = '';
      this.autoDate = [];
      this.autoThisChange = [];
      this.autoCumChange = [];
      this.autoRateChange = [];
    },
    openInfoR(item) {
         this.canvasStyle.width = this.canvasWidth + 'px';
     
      var params = {
        _method: "PMHSE_TRADATAIN.selectChange",
        dotName: item.DOTNAME,
        traPro:item.TRAOBJECT
      };
      let json = {
        FixJSON: JSON.stringify(params)
      };
      this.$ajax({
        url: this.COMMON_URL,
        method: "post",
        data: json
      }).then(res => {
          console.log(res)
        var list = res.data.list;
        if (list.length > 0) {
             this.showDialog = true;
          this.normalUnit = list[0].UNIT.replace(/(^\s*)|(\s*$)/g, "");
          for (var i = 0; i < list.length; i++) {
            this.normalDate.push(list[i].INPUTDATE.substring(0, 10));
            this.normalThisChange.push(list[i].THISCHANGE);
            this.normalCumChange.push(list[i].CUMCHANGE);
            this.normalRateChange.push(list[i].RATECHANGE);
          }
          this.drawNormalEcharts();
        } else {
          this.$vux.toast.show({
            type: "text",
            text: "暂无数据！",
            position: "center"
          });
        }
      });
    },
    drawNormalEcharts(){
      var myChart = echarts.init(document.getElementById("safety"));
      
      var option = {
        title: {
          text: "传统监测信息展示",
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["变化量", "累计变化量", "变化率"]
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: $vue.normalDate
          }
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              formatter: "{value}" + $vue.normalUnit,
              fontSize : 6,
              
            },
          }
        ],
        series: [
          {
            name: "变化量",
            type: "line",
            data: $vue.normalThisChange,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }]
            }
          },
          {
            name: "累计变化量",
            type: "line",
            data: $vue.normalCumChange,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }]
            }
          },
          {
            name: "变化率",
            type: "line",
            data: $vue.normalRateChange,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }]
            }
          }
        ]
      };
      myChart.setOption(option);
      //防止二次点击时重复加载数据
      this.normalUnit = '';
      this.normalDate = [];
      this.normalThisChange = [];
      this.normalCumChange = [];
      this.normalRateChange = [];
    },
    infinite(done) {
      //上划加载方法
      // console.log("infinite");
      // console.log(this.page);
      if (this.flagC) {
        this.getData(
          res => {
            //res.data.datas中的字段都是大写的，res.data.data中的字段有小写的
            if (res.status == "200" && res.data.datas.length > 0) {
              this.list = [...this.list, ...res.data.datas]; //TODO 啥意思
              this.page++;
              done();
            } else {
              done(true); //有错误的情况或者没有记录，传参true
            }
          },
          () => {
            done(true);
          }
        );
      }
      if (this.flagR) {
        this.getDataR(
          res => {
            //res.data.datas中的字段都是大写的，res.data.data中的字段有小写的
            if (res.status == "200" && res.data.datas.length > 0) {
              this.listR = [...this.listR, ...res.data.datas]; //TODO 啥意思
              this.pageR++;
              done();
            } else {
              done(true); //有错误的情况或者没有记录，传参true
            }
          },
          () => {
            done(true);
          }
        );
      }
    },
    refresh(done) {
      this.page = 1;
      this.pageR = 1;
      // // console.log("refresh");
      // // console.log(this.page);
      // debugger
      // this.loading = true;
      if (this.flagC) {
        this.getData(
          res => {
            if (res.status == "200" && res.data.datas.length > 0) {
              this.list = [...res.data.datas];
              this.page++;
              done();
            } else {
              done(true);
            }
          },
          () => {
            done(true);
          }
        );
      }
      if (this.flagR) {
        this.getDataR(
          res => {
            if (res.status == "200" && res.data.datas.length > 0) {
              this.listR = [...res.data.datas];
              this.pageR++;
              done();
            } else {
              done(true);
            }
          },
          () => {
            done(true);
          }
        );
      }
    },
    search(val) {
      this.page = 1;
      this.keyword = val;
      this.getData(
        res => {
          if (res.status == "200" && res.data.datas.length > 0) {
            this.list = [...res.data.datas];
            this.page++;
          } else {
            this.list = [];
          }
        },
        () => {
          this.list = [];
        }
      );
    }
  },

  computed: {
    row() {
      return this.$store.state.currentRow;
    }
  },
  watch: {}
};
</script>

<style scoped>
.card {
  background: #fff;
  margin: 10px 16px;
  padding: 20px;
  border-radius: 4px;
  overflow: hidden;
}

.card-title {
  font-size: 18px;
}
.warning {
  color: red;
  padding: 0 5px;
  background-color: pink;
  text-align: center;
  width: 140px;
  line-height: 30px;
  font-size: 14px;
}

.gray-label {
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(175, 175, 175, 1);
  line-height: 20px;
}

#headeright {
  position: absolute;
  right: 0px;
  top: 5px;
  display: block;
  font-size: 14px;
  line-height: 21px;
  width: 20px;
  height: 20px;
}
.box-bar:before {
  content: "";
  display: block;
  height: 17px;
  position: absolute;
  border-left: 4px solid #a7aeff;
  left: 14px;
  top: 18px;
}
.hidanger-chosetaskfontshow {
  max-width: 70px;
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
  /*设置overflow后基线位置改变，因此需要调整*/
  vertical-align: bottom;
}
.add_form {
  position: absolute;
  height: 50px;
  width: 90%;
  top: 90%;
  z-index: 999;
  left: 5%;
  background: #4d86ff;
  color: #ffffff;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* .transition-view .vux-header .vux-header-left /deep/.left-arrow:before{
   border: 1px solid rgb(228, 15, 15);
 } */
.fill_time {
  margin-left: auto;
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(175, 175, 175, 1);
  line-height: 20px;
}
.fill_user {
  font-size: 13px;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(175, 175, 175, 1);
  line-height: 20px;
}
/* .group-control /deep/ .weui-cells::after{
  display: none
} */
.state_time_style {
  display: flex;
  margin-top: 8px;
}
.sup {
  width: 100%;
  height: 10px;
  border-radius: 0;
  background-color: #f5f5f5;
}
.project_style {
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(25, 25, 25, 1);
  line-height: 20px;
  margin-top: 8px;
}
.select_pro {
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 600;
  color: rgba(25, 25, 25, 1);
  line-height: 20px;
}
</style>
